<template>
    <div class="bg-[#fff] rounded-[1.1rem] border border-[#F3F4F6] p-[1.5rem] shadow-[0px_2px_8px_0px_#0F172A0A]">
        <p class="text-[1rem] font-[Inter] font-normal leading-[1.5rem] text-[#000000] mb-[1rem]">分类</p>
        <div class="flex flex-col gap-[0.5rem]">
        
            <div v-for="(item, index) in categoryList" :key="index" class="rounded-[0.5rem] transition-all duration-300">
                <div 
                    class="flex justify-between items-center  cursor-pointer"
                    :class="{'text-[#3B82F6]': !item.children && activeId === item.id}"
                    @click="handleItemClick(item)">
                    <div class="flex items-center">
                        <img :src="item.icon" class="w-[1rem] h-[1rem] mr-[0.5rem]" alt="icon" />
                        <span>{{ item.title }}</span>
                    </div>
                    <el-icon v-if="item.children" class="transform transition-transform" :class="{ 'rotate-180': item.isExpanded }">
                        <ArrowDown />
                    </el-icon>
                </div>
                <div v-if="item.children && item.isExpanded" class="pl-[0.75rem] mt-[0.5rem] space-y-[0.5rem]">
                    <div 
                        v-for="(subItem, subIndex) in item.children" 
                        :key="subIndex" 
                        class="flex items-center cursor-pointer  text-[0.875rem]"
                        :class="[
                            'text-gray-600',
                            {'!text-[#3B82F6]': activeId === subItem.id}
                        ]"
                        @click.stop="handleSubItemClick(subItem)">
                        <img :src="subItem.icon" class="w-[1rem] h-[1rem] mr-[0.5rem]" alt="icon" />
                        <span>{{ subItem.title }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'

interface SubCategoryItem {
    id: number;
    title: string;
    icon: string;
}

interface CategoryItem {
    id: number;
    title: string;
    icon: string;
    isExpanded?: boolean;
    children?: SubCategoryItem[];
}

const activeId = ref<number | null>(null)

const categoryList = ref<CategoryItem[]>([
    {
        id: 1,
        title: "资源",
        icon: '/public/icon/publish-topic/write.svg',
        isExpanded: false,
        children: [
            {
                id: 11,
                title: "必读好书",
                icon: '/public/icon/publish-topic/write.svg'
            },
            {
                id: 12,
                title: "名人演讲",
                icon: '/public/icon/publish-topic/write.svg'
            },
            {
                id: 13,
                title: "软件工具",
                icon: '/public/icon/publish-topic/write.svg'
            },
            {
                id: 14,
                title: "教学课程",
                icon: '/public/icon/publish-topic/write.svg'
            }
        ]
    },
    {
        id: 2,
        title: "讨论",
        icon: '/public/icon/publish-topic/write.svg',
        isExpanded: false,
        children: [
            {
                id: 21,
                title: "技术交流",
                icon: '/public/icon/publish-topic/write.svg'
            },
            {
                id: 22,
                title: "经验分享",
                icon: '/public/icon/publish-topic/write.svg'
            }
        ]
    },
    {
        id: 3,
        title: "公告",
        icon: '/public/icon/publish-topic/write.svg'
    }
])

const handleItemClick = (item: CategoryItem) => {
    if (item.children) {
        // 如果有子分类，只处理展开/收起
        item.isExpanded = !item.isExpanded
    } else {
        // 如果没有子分类，处理选中状态
        activeId.value = item.id
    }
}

const handleSubItemClick = (subItem: SubCategoryItem) => {
    activeId.value = subItem.id
}

onMounted(() => {
    // 获取第一个分类
    const firstItem = categoryList.value[0]
    if (firstItem) {
        if (firstItem.children && firstItem.children.length > 0) {
            // 如果第一个分类有子分类，展开它并选中第一个子分类
            firstItem.isExpanded = true
            activeId.value = firstItem.children[0].id
        } else {
            // 如果第一个分类没有子分类，直接选中它
            activeId.value = firstItem.id
        }
    }
})
</script>

<style scoped>
</style>